import { Table, Space, Button, Popconfirm, Badge } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import type { TableProps } from 'antd/es/table';
import type { User, UserStatus } from '@/types/user';

// 状态标签映射
const statusTagMap: Record<UserStatus, React.ReactNode> = {
  active: <Badge status="success" text="活跃" />,
  inactive: <Badge status="default" text="未活跃" />,
  pending: <Badge status="processing" text="待审核" />,
  suspended: <Badge status="error" text="已停用" />
};

interface UserTableProps {
  dataSource: User[];
  loading: boolean;
  total: number;
  pageSize: number;
  currentPage: number;
  onPageChange: (page: number, pageSize: number) => void;
  onSortChange: (field: string, order: 'ascend' | 'descend' | null) => void;
  onEdit: (record: User) => void;
  onDelete: (id: number) => void;
}

const UserTable = ({
  dataSource,
  loading,
  total,
  pageSize,
  currentPage,
  onPageChange,
  onSortChange,
  onEdit,
  onDelete
}: UserTableProps) => {
  // 表格列配置
  const columns: TableProps<User>['columns'] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
      sorter: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      sorter: true,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      sorter: true,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 80,
      sorter: true,
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      sorter: true,
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      sorter: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: UserStatus) => statusTagMap[status],
      sorter: true,
    },
    {
      title: '加入日期',
      dataIndex: 'joinDate',
      key: 'joinDate',
      sorter: true,
    },
    {
      title: '操作',
      key: 'action',
      width: 180,
      render: (_, record) => (
        <Space size="middle">
          <Button 
            type="primary" 
            size="small" 
            icon={<EditOutlined />}
            onClick={() => onEdit(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除此用户吗？"
            onConfirm={() => onDelete(record.id)}
            okText="是"
            cancelText="否"
          >
            <Button 
              danger 
              size="small" 
              icon={<DeleteOutlined />}
            >
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 处理表格变化
  const handleTableChange: TableProps<User>['onChange'] = (pagination, _, sorter) => {
    onPageChange(pagination.current || 1, pagination.pageSize || 10);
    
    if (sorter.field && sorter.order) {
      onSortChange(sorter.field as string, sorter.order);
    } else if (sorter.field && !sorter.order) {
      onSortChange(sorter.field as string, null);
    }
  };

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowKey="id"
      loading={loading}
      pagination={{
        current: currentPage,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showTotal: (total) => `共 ${total} 条记录`,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50'],
      }}
      onChange={handleTableChange}
      scroll={{ x: 'max-content' }}
      size="middle"
    />
  );
};

export default UserTable;
    